import { Outlet } from "react-router-dom";
import { Layout, Menu } from "antd";
import Settings from "../components/Settings";
import { menuItems } from "./const";

const { Header, Content, Footer } = Layout;

export default function MainLayout() {
  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          items={menuItems}
          style={{ flex: 1, minWidth: 0 }}
        />
        <Settings />
      </Header>
      <Content style={{ padding: "0 48px", margin: "24px 0" }}>
        <div style={{ background: "#fff", padding: 24, minHeight: 280 }}>
          <Outlet />
        </div>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        &copy; 2025 My App. All rights reserved.
      </Footer>
    </Layout>
  );
}